import React, { Component } from 'react'
// 路由得名字不要和接口得名字一样
import axios from "axios"
class Movie extends Component {
  state = {
      arr:[]
  }
  async componentDidMount(){
    let res = await axios.get("/list")
    console.log(res.data)
    this.setState({
        arr:res.data
    })
  }
  goDeatil(item){
      //  this.props.history放的路由信息
      this.props.history.push({
          pathname:"/detail/" + item.id,
      })
  }
  render() {
    let {arr} =this.state
    return (
      <div className='movie'>
          {
            arr&&arr.length?arr.map((item,index)=>{
                return (
                    <div key={index}>
                        <span>{item.title}</span>
                        <img src={item.img} alt="" onClick={this.goDeatil.bind(this,item)}/>
                    </div>
                )
            }):"暂无数据"
          }
      </div>
    )
  }
}

export default Movie